<template>
	<view>
		<view class="card">
			<navSearchBar title="个人中心" background=""></navSearchBar>
			<view class="info flex-col-between">
				<view class="info-left flex-row-center">
					<image :src="userInfo.avatar" mode="aspectFill"></image>
					<view>
						<view class="my-name">{{userInfo.nickname}}</view>
						<view class="my-job">
							<text>职位:</text>
							<text>{{userInfo.deatail.position}}</text>
						</view>
					</view>
				</view>
				<view class="info-right">
					<view class="my-card flex-col-end" @click="toCard">
						<text>我的名片</text>
						<image src="/static/personal/right.png" mode=""></image>
					</view>
					<view class="my-phone flex-col-end">
						<image src="/static/personal/phone.png" mode=""></image>
						<text>{{userInfo.username}}</text>
					</view>
				</view>
			</view>
			<view class="custom-box">
				<view class="custom flex-col-between">
					<view class="custom-item " v-for="item in custom" :key="item.name" @click="handleCustomer(item)">
						<text>{{item.value}}</text>
						<text>{{item.name}}</text>
					</view>
				</view>

			</view>
		</view>
		<view class="menu">
			<view class="menu-item flex-row-center" v-for="item in menu" :key="item.name" @click="handleMenu(item)">
				<image class="menu-icon" :src="item.icon" mode=""></image>
				<text>{{item.name}}</text>
				<image class="menu-detail" src="/static/personal/right.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				custom: [{
						name: "全部客户",
						key: "client_all_total",
						value: 0,
						url:'allClient'
						
					},
					{
						name: "全部需求",
						key: "demand_all_total",
						value: 0,
						url:'allDemand',
					},
					{
						name: "全部联系人",
						key: "contact_all_total",
						value: 0,
						url:"contact",
						query:{type:1}
					},
					{
						name: "访问记录",
						key: "browse_all_total",
						value: 0,
						url: "record",
						query:{type:1}
					},
					{
						name: "我的客户",
						key: "client_total",
						value: 0,
						url:'myClient'
					},
					{
						name: "我的需求",
						key: "demand_total",
						value: 0,
						url:'myDemand',
					},
					
					{
						name: "我的联系人",
						key: "contact_total",
						value: 0,
						url:"contact",
						query:{type:2}
						
					},
					{
						name: "我的记录",
						key: "browse_total",
						value: 0,
						url:"record",
						query:{type:2}
					},
				],
				menu: [{
						icon: "/static/personal/my-info.png",
						name: "个人资料",
						url: "personalInfo"
					},
					// {
					// 	icon: "/static/personal/my-list.png",
					// 	name: "我的活动单",
					// 	url: "active"
					// },
					{
						icon: "/static/personal/my-collect.png",
						name: "我的收藏",
						url: "collect"
					},
					{
						icon: "/static/personal/my-label.png",
						name: "我的标注",
						url: "label"
					},
					{
						icon: "/static/personal/my-car.png",
						name: "我的购物车",
						url: "shopcar"
					},
					{
						icon: "/static/personal/my-share.png",
						name: "我的分享",
						url: "share"
					},
					{
						icon: "/static/personal/my-share.png",
						name: "全部分享 ",
						url: "allShare"
					}
				]
			};
		},
		onLoad() {
			
		},
		onShow() {
			//因为编辑个人信息或者从这个界面点击到五大模块，在回退回来，这里需要更新
			this.getUserInfo()
			this.getStatisInfo()
		},
		methods: {
			async getUserInfo() {
				let res = await this.$api.userInfo()
				console.log(res, "res")
				this.userInfo = res.data.data
			},
			async getStatisInfo() {
				let res = await this.$api.statisInfo()
				if (res.data.status == 200) {
					this.custom.map(item => {
						item.value = res.data.data[item.key]
					})
				}
			},
			toCard() {
				this.$Router.push({
					name: "personalCard"
				})
			},
			handleCustomer(item) {
				if(item.url) {
					this.$Router.push({name:item.url,query:{...item.query}})
				}
			},
			handleMenu(item) {
				this.$Router.push({name: item.url})
				console.log(item.url, "url")
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		// height: 516rpx;
		background: linear-gradient(180deg, #E9ECFF 0%, #FFFFFF 100%);
		border-top: none;
		margin-bottom: 30rpx;
	}

	.info {
		margin: 40rpx 40rpx 50rpx;

		.info-left {
			image {
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 6rpx solid #FFFFFF;
				box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.10);
				margin-right: 30rpx;
			}

			.my-name {
				font-size: $text-size;
				font-weight:  $Semibold;
				font-size: 32rpx;
				margin-bottom: 24rpx;
			}

			.my-job {
				font-size: $text-size;

				text:nth-of-type(1) {
					margin-right: 20rpx;
				}
			}
		}

		.info-right {
			font-size: $text-size;

			.my-card {
				margin-bottom: 28rpx;

				text {
					font-weight: $Semibold;
					margin-right: 10rpx;
				}

				image {
					width: 10rpx;
					height: 20rpx;
				}
			}

			.my-phone {
				image {
					width: 20rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}


			}
		}
	}

	.custom-box {

		margin: 0 30rpx;
		padding: 40rpx 32rpx;
		height: 180rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.10);
		border-radius: 20rpx;
		background: #FFFFFF;

		.custom {
			width: 100%;
			height: 100%;
			overflow-y: hidden;
			white-space: nowrap;
			overflow-x: scroll;
			
			.custom-item {
				flex: 0 0 auto;
				width: 25%;

				text {
					display: block;
					text-align: center;
					height: 30rpx;
					line-height: 30rpx;
				}

				text:nth-of-type(1) {
					font-size: 36rpx;
					font-weight: $Semibold;
					margin-bottom: 40rpx;
				}

				text:nth-of-type(2) {
					font-size: 28rpx;
					color: #999999;
				}
			}
		}

	}

	.menu {
		margin: 0 30rpx;
		padding: 0 40rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.10);
		border-radius: 20rpx;

		.menu-item {
			height: 116rpx;
		}

		.menu-icon {
			width: 40rpx;
			height: 48rpx;
			margin-right: 20rpx;
		}

		text {
			font-size: 28rpx;
			font-weight: $Semibold;
		}

		.menu-detail {
			width: 10rpx;
			height: 20rpx;
			margin-left: auto;
		}
	}
</style>